<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @keyup.enter.native="search()"
    >
      <el-form-item label="协议名称">
        <br />
        <br />
        <el-input
          v-model="formInline.protocolName"
          style="margin-left: -70px; width: 200px"
          placeholder
        />
      </el-form-item>
      <el-form-item label="协议状态">
        <br />
        <br />
        <el-select
          v-model="formInline.protocolState"
          style="margin-left: -70px; width: 200px"
        >
          <el-option label="全部" value />
          <el-option label="已发布" value="1" />
          <el-option label="未发布" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <br />
        <br />
        <el-date-picker
          v-model="formInline.craetTime"
          style="margin-left: -70px; width: 400px"
          align="right"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="协议编号">
        <br />
        <br />
        <el-input
          v-model="formInline.protocolNum"
          style="margin-left: -70px; width: 200px"
          placeholder
        />
      </el-form-item>
      <el-form-item label="协议类型">
        <br />
        <br />
        <el-select
          v-model="formInline.protocolType"
          style="margin-left: -70px; width: 200px"
        >
          <el-option label="全部" value />
          <el-option
            v-for="(item, index) in protocolTypeList"
            :key="index"
            :label="item.protocolTypeName"
            :value="item.protocolTypeCode"
          />
        </el-select>
      </el-form-item>

      <div style="width: 100%; display: flex; justify-content: flex-end">
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
            size="mini"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >清空</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="$router.push({ path: '/agreementDetail' })"
            icon="el-icon-edit"
            >新增</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-table
      :data="tableData"
      v-loading="loading"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="protocolNum" label="协议编号" align="center" />
      <el-table-column prop="protocolName" label="协议名称" align="center" />
      <el-table-column
        prop="protocolType"
        label="协议类型"
        align="center"
        :formatter="protocolTypeFormatter"
      />
      <el-table-column
        prop="protocolCraetTime"
        label="协议创建时间"
        align="center"
      />
      <el-table-column label="协议状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.protocolState"
            active-value="1"
            inactive-value="0"
            @change="changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.protocolState == '0'"
            @click="
              $router.push({
                name: 'agreementDetail',
                params: { protocolNum: scope.row.protocolNum, type: 'edit' },
              })
            "
          >
            编辑
          </el-button>
          <!-- <el-button
            type="text"
            size="mini"
            v-if="scope.row.protocolState == '0'"
            @click="deleteAgreement(scope.row)"
            >删除</el-button
          > -->
          <el-button
            type="text"
            size="mini"
            @click="
              $router.push({
                name: 'agreementDetail',
                params: { protocolNum: scope.row.protocolNum, type: 'detail' },
              })
            "
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top: 5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getProtocolType,
  updateAgreement,
  getAgreementList,
} from "@/api/agreementManage";

export default {
  data() {
    return {
      formInline: {
        protocolName: "",
        protocolState: "",
        craetTime: [],
        protocolNum: "",
        protocolType: "",
      },

      protocolTypeList: [],

      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 20,
      },
      total: 0,
    };
  },

  created() {
    // 获取协议类型
    getProtocolType().then((res) => {
      if (res.code == 1) {
        this.protocolTypeList = res.records;

        this.search();
      }
    });
  },

  methods: {
    search() {
      getAgreementList({
        condition: {
          ...this.formInline,
          beginDate: this.formInline.craetTime[0],
          endDate: this.formInline.craetTime[1],
        },
        ...this.listQuery,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.records;
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
        }
      });
    },

    kong() {
      this.formInline = this.$options.data().formInline;
    },

    handleSizeChange(value) {
      this.listQuery.size = value;
      this.search();
    },
    handleCurrentChange(value) {
      this.listQuery.current = value;
      this.search();
    },

    changeStatus(row) {
      const initStatus = row.protocolState;
      row.protocolState = row.protocolState === "1" ? "0" : "1";
      this.$confirm(
        `确定${initStatus == 1 ? "启用" : "停用"}当前协议：${
          row.protocolName
        }吗？`,
        "温馨提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        updateAgreement({
          protocolNum: row.protocolNum,
          protocolState: initStatus,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success("操作成功");
            this.search();
          }
        });
      });
    },

    deleteAgreement(row) {
      this.$confirm(`确定删除当前协议：${row.protocolName}吗？`, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        updateAgreement({
          protocolNum: row.protocolNum,
          isDelete: 1,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success("操作成功");
            this.search();
          }
        });
      });
    },

    protocolTypeFormatter(row, column, cellValue) {
      const curItem = this.protocolTypeList.find(
        (item) => item.protocolTypeCode == cellValue
      );
      return curItem ? curItem.protocolTypeName : "";
    },
  },
};
</script>